<template>
	<div>
		<cl-crud @load="onLoad">
			<template #slot-filter>
				<div class="nav base-flex">
					<div class="nav-li">
						<div>
							<span>分类</span>
							<el-select
								class="el-select"
								placeholder="请选择"
								size="mini"
								v-model="params.cid"
								@change="val => refresh({ cid: val })"
							>
								<el-option label="全部" value></el-option>
								<el-option
									:label="item.label"
									:value="item.value"
									v-for="(item, i) in typeOptions2"
									:key="i"
								></el-option>
							</el-select>
						</div>
					</div>
				</div>
			</template>
			<template #slot-delete="{scope}">
				<delBtn @del="crud.delete(scope.row)"></delBtn>
			</template>

			<template #table-column-goodInfo="{scope}">
				<JdGoodInfo :item="scope.row"></JdGoodInfo>
			</template>
			<template #table-column-isRecommended="{scope}">
				<div>
					<el-tag v-if="scope.row.isRecommended == 1" type="success">是</el-tag>
					<el-tag type="info" v-else>否</el-tag>
				</div>
			</template>
			<template #table-column-couponInfo="{scope}">
				<jd-coupon-info :item="scope.row"></jd-coupon-info>
			</template>
			<template #table-column-isDHh="{scope}">
				<div>
					<el-tag v-if="scope.row.isDhh == 1" type="success">是</el-tag>
					<el-tag type="info" v-else>否</el-tag>
				</div>
			</template>
			<template #table-column-gStatus="{scope}">
				<div>
					<el-tag v-if="scope.row.gStatus == 1" type="success">正常</el-tag>
					<el-tag type="info" v-if="scope.row.gStatus == 2">已下架</el-tag>
				</div>
			</template>
			<template #table-column-isNine="{scope}">
				<div>
					<el-tag v-if="scope.row.isNine == 1" type="success">是</el-tag>
					<el-tag type="info" v-else>否</el-tag>
				</div>
			</template>
			<template #table-column-platform="{scope}">
				{{ scope.row.source | dict_platform }}
			</template>
		</cl-crud>
	</div>
</template>

<script>
import JdGoodInfo from './components/list/jd-good-info-bigShot';
import JdCouponInfo from './components/list/jd-coupon-info-bigShot';
import goodInfo from './components/list/good-info';
import couponInfo from './components/list/coupon-info';
import searchCounpon from './components/list/searchCoupon';
import filterClass from './components/filterClass';
// import filterGstatus from './components/filterGstatus';
import { platform } from '@/dict/index';
import { Type_TLJ } from '@/dict/index';
import moment from 'moment';
import store from 'store';

export default {
	data() {
		return {
			crud: null,
			platform: platform,
			platformIndex: '',
			mail: '',
			dou: '',
			filterSelectVal: {
				amount: 0, //劵金额
				monthSales: 0, //月销量
				isNine: '',
				isDouGoods: '',
				isRecommended: 0
			},
			enterGoodsInfo: {},
			accountList: [], // 淘宝联盟列表
			fromList: [], // 平台列表
			typeOptions: [],
			typeOptions2: [],
			perfaceValue_GoodInfo: 0,
			perfaceValue_Rush: 0,
			perfaceValue_Zero: 0,
			goodsTitle: '正在获取中',
			actime: [],
			goodsTypeMemory: '',
			params: {
				cid: '',
				type: 1
			},
			rankType: [
				{
					value: 1,
					label: '实时榜'
				}
			]
		};
	},
	components: {
		goodInfo,
		couponInfo,
		// eslint-disable-next-line
		searchCounpon,
		filterClass,
		JdGoodInfo,
		JdCouponInfo
		// filterGstatus
	},
	created() {
		this.actime = [
			moment(new Date().getTime() + 86400000).format('YYYY-MM-DD 00:00:00'),
			moment(new Date().getTime() + 172800000).format('YYYY-MM-DD 00:00:00')
		];
		this.taobaoAccountTlj();
		this.getType();
		this.platForm();
	},
	methods: {
		// 101
		getType() {
			// 获取京东商品分类
			this.$service.goodsMenagement.specialClassify
				.page({
					page: 1,
					size: 60,
					sort: 'asc',
					order: 'level',
					specialType: 107
				})
				.then(res => {
					var temp = res.list;
					var target = [];
					for (var i = 0; i < temp.length; i++) {
						target[i] = { label: temp[i].mainName, value: temp[i].cid };
					}
					this.typeOptions2 = target;
				});
		},
		// 获取联盟账号
		async taobaoAccountTlj() {
			let list = await this.$service.goodsMenagement.taobaoAccountTlj.userAccountList({
				isBwbt: 1
			});
			list = list.map(item => {
				return {
					label: item.accountName,
					value: item.accountId
				};
			});
			this.accountList = list;
		},
		// 获取平台账号
		platForm() {
			this.$service.common.userAppList().then(res => {
				let list = res.map(el => {
					return {
						label: el.name,
						value: el.key
					};
				});
				this.fromList = list;
			});
		},
		submitForm(formData) {
			this.crud.setForm('data', formData);
			this.crud.submit();
		},
		onLoad({ ctx, app }) {
			const self = this;
			this.crud = app;
			ctx.service(this.$service.jd.pddGoods)
				.set('dict', {
					api: {
						info: 'detail'
					}
				})
				.set('table', {
					columns: [
						{
							label: '序号',
							type: 'index',
							align: 'center',
							width: 80
						},
						{
							label: '商品信息',
							prop: 'goodInfo',
							align: 'left',
							'min-width': 400
						},
						{
							label: '优惠券信息',
							prop: 'couponInfo',
							align: 'left',
							'min-width': 350
						},
						{
							label: '创建时间',
							prop: 'createTime',
							align: 'center',
							'min-width': 150,
							sortable: 'custom'
						},
						{
							label: '更新时间',
							prop: 'updateTime',
							align: 'center',
							'min-width': 150,
							sortable: 'custom'
						},
						{
							label: '历史排名',
							prop: 'ranking',
							align: 'center',
							'min-width': 100,
							sortable: 'custom'
						},
						{
							label: '月销量',
							prop: 'inOrderCount30Days',
							align: 'center',
							sortable: 'custom',
                            emptyText: '0',
							'min-width': 100,
                            
						},
						{
							label: '佣金比例',
							prop: 'commissionShare',
							align: 'center',
							sortable: 'custom',
							emptyText: '0'
						}
					],
					op: {
						visible: false
					}
				})
				.set('upsert', {
					props: {
						labelWidth: '120px',
						center: true,
						'custom-class': 'custom-class-dialog'
					},
					items: [
						{
							prop: 'pic',
							label: '商品主图：',
							span: 24,
							component: {
								name: 'cl-upload'
							}
						},
						{
							prop: 'title',
							label: '商品标题',
							span: 24,
							component: {
								name: 'el-input',
								attrs: {
									size: 'mini'
								}
							}
						},
						{
							prop: 'url',
							props: {
								labelWidth: '0px'
							},
							// label: '优惠券链接：',
							component: {
								name: 'search-counpon',
								methods: {
									input(e) {
										this.$emit('input', e);
									}
								},
								render() {
									return (
										<searchCounpon
											onInput={this.input}
											item={self.enterGoodsInfo}></searchCounpon>
									);
								}
							},
							rules: [{ required: true, message: '请先检索商品', trigger: 'blur' }]
						},
						{
							prop: 'isNine',
							label: '是否9.9包邮：',
							value: false,
							component: {
								name: 'el-switch'
							}
						},
						{
							prop: 'isFree',
							label: '是否0元购：',
							value: false,
							component: {
								name: 'el-switch'
							}
						},

						{
							prop: 'ysqLevel',
							label: '商品排序：',
							value: 100,
							component: {
								name: 'ysqlevels',
								data() {
									return {
										ysqLevel: 100
									};
								},
								props: {
									value: [String, Number]
								},
								mounted() {
									this.ysqLevel = this.value;
								},
								methods: {
									input(e) {
										this.$emit('input', e);
									}
								},
								render() {
									return (
										<div style="display:flex">
											<el-input-number
												v-model={this.ysqLevel}
												controls-position="right"
												onInput={this.input}
												min={1}
												max={10000}></el-input-number>
											<span style="color:#999999;margin-left:10px">
												序号越大，排序越靠前
											</span>
										</div>
									);
								}
							}
						},
						{
							prop: 'gStatus',
							label: '商品状态：',
							value: 1,
							component: {
								name: 'g_radio',
								data() {
									return {
										value2: 1
									};
								},
								props: {
									value: [String, Number]
								},
								mounted() {
									this.value2 = Number(this.value || 1);
								},
								methods: {
									change(e) {
										this.$emit('input', e);
									}
								},
								render() {
									return (
										<el-radio-group
											onChange={this.change}
											v-model={this.value2}>
											<el-radio label={1}>上架</el-radio>
											<el-radio label={0}>下架</el-radio>
										</el-radio-group>
									);
								}
							}
						},
						{
							prop: 'isRecommended',
							props: {
								'label-width': '120px'
							},
							label: '是否开启首页置顶',
							span: 13,
							value: false,
							component: {
								name: 'el-switch',
								on: {
									change(val) {
										if (val) {
											app.setData(
												'upsert.items[prop:recommendSort].hidden',
												false
											);
										} else {
											app.setData(
												'upsert.items[prop:recommendSort].hidden',
												true
											);
										}
									}
								}
							}
						},
						{
							prop: 'recommendSort',
							label: '商品置顶排序',
							span: 24,
							hidden: true,
							value: 1,
							component: {
								name: 'recommendSort-input',
								data() {
									return {
										value2: 0
									};
								},
								props: {
									value: [String, Number]
								},
								mounted() {
									this.value2 = this.value;
								},
								methods: {
									input(e) {
										this.$emit('input', e);
									}
								},
								render() {
									return (
										<div style="display:flex">
											<el-input-number
												controls-position="right"
												min={1}
												max={5}
												onInput={this.input}
												v-model={this.value2}></el-input-number>
											<span style="color:red;margin-left:10px">
												* 首页置顶(序号越小，排序越靠前)
											</span>
										</div>
									);
								}
							},
							rules: [{ required: true, message: '排序不能为空', trigger: 'blur' }]
						}
					],
					op: {
						visible: true,
						layout: ['confirm']
					}
				})
				.set('layout', [
					['refresh-btn', 'slot-filter', 'query', 'flex1', 'search-key'],
					['data-table'],
					['flex1', 'pagination']
				])
				.on('open', () => {
					app.setData('upsert.items[prop:recommendSort].hidden', true);
				})
				.on('close', isOpen => {
					if (!isOpen) {
						// 清空商品数据
						this.enterGoodsInfo = {};
					}
				})
				.on('submit', (isOpen, data, { next }) => {
					next({
						...data,
						...data.url,
						isFree: data.isFree ? 1 : 0,
						isRecommended: data.isRecommended ? 1 : 0,
						isNine: data.isNine ? 1 : 0,
						gid: this.enterGoodsInfo.gid
					});
				})
				.on('refresh', async (params, { next }) => {
					if (params.isNine === '') {
						delete params.isNine;
					}
					if (params.isDhh === '') {
						delete params.isDhh;
					}
					let { list } = await next(params);
					list.map(item => {
						item.commissionRate = (item.commissionRate || 0) + '%';
						item.sale = item.sale + '件';
					});
				})
				.done();

			app.refresh({
				startCouponMoney: 0,
				startSale: 0,
				type: self.params.type
			});
		},

		refresh(data) {
			this.crud.refresh({
				...data
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.nav {
	padding: 0 10px;
	font-size: $font12;
	::v-deep .el-input-number.is-controls-right .el-input__inner {
		padding-left: 15px;
		padding-right: 20px;
	}
	::v-deep .el-input-number--mini {
		width: 71px;
	}
	.nav-li {
		margin-right: 20px;
		span {
			color: $text-grey;
			margin-right: 10px;
		}
		.el-select {
			width: 90px;
		}
		.el-input-number--mini {
			width: 100px;
		}
	}
}
.setsort {
	color: $color-link;
	cursor: pointer;
	margin: 5px 5px 5px 15px;
	:hover {
		opacity: 0.8;
	}
}
</style>
